import React from 'react'
import FormulaInput from 'components/formula-input'
import { Button } from 'antd'

export default {
  key: 'formula-input',
  name: 'FormulaInput 公式输入器',
  author: '张然',
  description: '用于编辑多个因子组成的内容。',
  isExampleFull: false,
  api: [{
    title: 'API',
    data: [{
      param: 'factors', description: '内部渲染需要的数据数组。', type: 'array', defaultValue: '[]'
    }, {
      param: 'renderFactor', description: '渲染::factors::的规则，如果返回纯文本则会包裹一个::span::标签。', type: 'function(factor)', defaultValue: 'text => text'
    }, {
      param: 'cursor', description: '是否需要输入指针。', type: 'bool', defaultValue: 'true'
    }, {
      param: 'onDelete', description: '按下键盘退格键时的回调，第一个参数为按下删除键时指针所在的::factor::位置，第二个参数::resetCursor::是个方法，调用后内部会将指针位置-1然后重新计算位置。', type: 'function(index, resetCursor)', defaultValue: '() => {}'
    }],
    description: ''
  }],
  example: [
    {
      title: '基本用法',
      description: '生成一个公式输入器。',
      state: {
        factors: []
      },
      getMethod: context => {
        return {
          onAdd: text => {
            const [factors, resetPointer] = context.input.addFactor(text);
            context.setState({ factors }, resetPointer);
          },
          renderFunction: text => isNaN(Number(text)) ?
            <span style={{
              background: '#f2f4f5',
              padding: '0 3px',
              borderRadius: 3,
              wordBreak: 'break-word',
              margin: '0 2px'
            }}>{text}</span> :
            text,
          onDelete: (index, resetPointer) => {
            const { factors } = context.state;
            factors.splice(index, 1);
            context.setState({ factors }, resetPointer);
          }
        }
      },
      getContent: context => {
        const { factors } = context.state;
        return (
          <div>
            <FormulaInput
              factors={factors}
              renderFactor={context.renderFunction}
              onDelete={context.onDelete}
              onRef={ref => context.input = ref}
            />
            <br />
            {['1', '2', '3', '+', '-', '一个比较长的公式'].map(text =>
              <Button key={text} onClick={e => context.onAdd(text)}>{text}</Button>
            )}
          </div>
        )
      }
    }
  ]
}
